import { MutableRefObject, useEffect, useRef, useState } from 'react';
import '@/view/editor/Editor.scss';
import { EditorHeader } from '@/view/editor/components/EditorHeader/EditorHeader';
import { EditorContent } from './components/EditorContent/EditorContent';
import { EditorModels, EVENT_UPDATE_EDITOR_MODELS } from './ts/EditorModels';
import { ConfigProvider } from 'antd';

function App() {
  let [editorScene, setEditorScene] = useState<EditorModels>();
  let [update, setUpdate] = useState<boolean>(false);
  let editorHeaderRef = useRef<HTMLDivElement>(null);
  let [headerHeight, setHeaderHeight] = useState<number>(0);
  useEffect(() => {
    editorScene?.$on(EVENT_UPDATE_EDITOR_MODELS, () => {
      setUpdate((preState) => !preState);
    });
    setHeaderHeight(editorHeaderRef.current?.getBoundingClientRect().height || 0);
  }, [editorScene]);
  const getEditorScene = (editorScene: EditorModels) => {
    setEditorScene(editorScene);
  };
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#ab50d7',
          colorBgContainer: '#fff',
        },
      }}
    >
      <div className="editor">
        {editorScene && <EditorHeader editorScene={editorScene} ref={editorHeaderRef} />}
        <div className="content">
          <EditorContent
            headerHeight={headerHeight}
            onchange={(editorScene) => getEditorScene(editorScene)}
          />
        </div>
      </div>
    </ConfigProvider>
  );
}

export default App;
